<template>
  <div class="music-banner">
    <fs-swipe>
      <fs-swipe-item
        :is-scale="true"
        :is-tran="true"
        width="66vw"
        v-for="(item, index) in props.bannerList"
        :key="index"
        @click="$router.push(`/music/singerDetail/${item[0].artists[0].id}`)"
      >
        <div class="recommand-box-item">
          <div class="recommand-box-fold">
            <img :src="`${item[0].picUrl}?param=300y300`" alt="" />
          </div>
          <div class="recommand-box-fold" style="transform: translateX(22px) scale(0.9); z-index: 2">
            <img :src="`${item[1].picUrl}?param=300y300`" alt="" />
          </div>
          <div class="recommand-box-fold" style="transform: translateX(44px) scale(0.8); z-index: 1">
            <img :src="`${item[2].picUrl}?param=300y300`" alt="" />
          </div>
        </div>
        <div class="recommand-box-content">
          <div class="inner-content">
            <div class="inner">
              <b>{{ props.singerList[index].name }}</b>
              <p class="show-one-line">{{ item[0].name }}</p>
            </div>
            <van-icon name="music-o" class="icon"></van-icon>
          </div>
        </div>
      </fs-swipe-item>
    </fs-swipe>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import FsSwipe from "@/components/FsSwipe/FsSwipe.vue";
import FsSwipeItem from "@/components/FsSwipe/FsSwipeItem.vue";
import type { IAlbumItem } from "@/types/music/albumType";
import type { ISingerItem } from "@/types/music/singerType";

const props = defineProps<{
  bannerList: Array<IAlbumItem[]>;
  singerList: ISingerItem[];
}>();

const images = ref<string[]>([
  "https://p2.music.126.net/lDBc_j-aTn4OIvfjGCsA3A==/109951167962336422.jpg?param=300y300",
  "https://p1.music.126.net/dvBE3I5IYmDTmZq9SyKoRA==/109951168159576909.jpg?param=300y300",
  "https://p1.music.126.net/uNq94mA9nxfmHOLheTqnLQ==/109951168079276732.jpg?param=300y300",
  "https://p2.music.126.net/wucBogPWt7onMMvWqlFjTg==/109951168141714124.jpg?param=300y300",
]);

const folds = ref<string[]>([
  "https://p2.music.126.net/P_mvZmpFm-L0O3ImrsBovg==/109951168108073490.jpg?param=300y300",
  "https://p2.music.126.net/rutWqaJEOxe8FCWOJlkZVQ==/109951168108078234.jpg?param=300y300",
]);
</script>

<style scoped lang="scss">
.music-banner {
  position: relative;
  height: 66vw;
  margin-top: 20px;
  .recommand-box {
    &-item {
      width: 100%;
      height: 100%;
      position: relative;
    }
    &-fold {
      width: 90%;
      height: 90%;
      overflow: hidden;
      border-radius: 10px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    &-content {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 30px;
      padding: 10px 16px;
      box-sizing: border-box;
      z-index: 10;
      color: #fff;
      b {
        font-size: 20px;
        color: hsla(0, 0%, 100%, 0.9);
      }
      p {
        margin: 0;
        color: hsla(0, 0%, 100%, 0.7);
        margin-top: 5px;
      }
      .inner-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 90%;
          height: 90%;
          z-index: -1;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.6705882352941176), hsla(0, 0%, 100%, 0));
          height: 50%;
          transform: translateY(105%);
          border-radius: 10px;
        }
      }
      .icon {
        font-size: 25px;
        margin-right: 20px;
        color: hsla(0, 0%, 100%, 0.7);
      }
    }
  }
}
</style>
